<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">

	<h:body>

		<ui:composition template="static/theme/censo2011/main.xhtml">

	<ui:define name="navegacion">
		<p:menuitem value="Consulta" url="#"/>
		<p:menuitem value="Poblacional" url="indicador_poblacional_shw.xhtml"/>	
	</ui:define>

			<ui:define name="contenido">
			<ui:include src="static/theme/censo2011/criterio.xhtml" />
<br/><br/><a href="javascript: launch();"><img src="static/imagenes/pdf.png"/>Visualizar Reporte</a>
<script type="text/javascript">
//<![CDATA[
	function launch(){
		win=window.open("gen_rep_na?reporte=piramide01","Reportes","width=800,height=480,top=10,left=0,resizable=YES,scrollbars=YES,menubar=NO,toolbar=NO,status=NO,location=NO");
	}
//]]> 	
</script>
			
			<script src="static/js/raphael.js" type="text/javascript"/>
			<script src="static/js/piramide.js" type="text/javascript"/>
		    <script src="static/js/mycharts.js" type="text/javascript"/>		

<h:form>

<br/><br/><br/>
<h1>Indicador Poblacional</h1>
<div align="center">
<table border="0">
<tr>
<td>
<div id="grafica"></div>
</td>
</tr>
<tr>
<td align="center">
<p:dataTable var="item" value="#{IndicadorPoblacionalSHW.li}" id="tbl">
<p:column>
<f:facet name="header"> <h:outputText value="INDICADOR" /> </f:facet>
<h:outputText value="#{item.text1}" />   
</p:column>
<p:column>
<f:facet name="header"> <h:outputText value="VALOR" /> </f:facet>
<h:outputText value="#{item.val1}" />   
</p:column>
</p:dataTable>
<br />
<h:panelGrid columns="2">
	<p:panel header="Exportar">
		<h:commandLink>
			<p:graphicImage value="/static/imagenes/excel.png" />
			<p:dataExporter type="xls" target="tbl" fileName="catalogos"/>
		</h:commandLink>

		<h:commandLink>
			<p:graphicImage value="static/imagenes/pdf.png" />
			<p:dataExporter type="pdf" target="tbl" fileName="catalogos"/>
		</h:commandLink>
	</p:panel>
</h:panelGrid>
</td>
</tr>
</table>
</div>


<script type="text/javascript">
// Creates canvas 320 × 200 at 10, 50
//var paper = Raphael(10, 50, 650, 500);
var paper = Raphael("grafica", 650, 350);

var pos_genX = 10;
var pos_genY = 30;
var tope = 250;
var grosor = 20;
var grps_serie = [<h:outputText value="#{IndicadorPoblacionalSHW.jgrps_serie}"/>];
var serie1 = [<h:outputText value="#{IndicadorPoblacionalSHW.jserie1}"/>];
var serie2 = [<h:outputText value="#{IndicadorPoblacionalSHW.jserie2}"/>];
var stepscala = 50;
var tit_gprs = 'GRUPO DE EDADES';
var tit_serie1 = 'HOMBRES';
var tit_serie2 = 'MUJERES';
var color_s1 = '#00f';
var color_s2 = '#f00'

grafica_piramide1(pos_genX, pos_genY, tope, grosor, stepscala, grps_serie, tit_gprs, serie1, tit_serie1, color_s1, serie2, tit_serie2, color_s2,paper);

</script>


</h:form>
			</ui:define>

		</ui:composition>

	</h:body>
</f:view>